<template>
  <div class="table-com">
    <div class="table-com-common table-com-title">
      <div class="table-com-td table-com-title-item">场次</div>
      <div
        class="table-com-td table-com-title-item"
        :style="{ width: !item.width ? '80px' : item.width + 'px' }"
        v-for="(item, index) in column"
        :key="index"
      >
        {{ item.label }}
        <van-icon
          v-if="item.isSort"
          @click="item.SortFun(data, item)"
          :name="item.SortType ? 'arrow-up' : 'arrow-down'"
          size="10"
          color="rgb(175,171,212)"
        />
      </div>
      <!-- 基础操作 -->
    </div>

    <div class="table-com-list">
      <div
        class="table-com-common table-com-list-item"
        v-for="(item, index) in data"
        :key="index"
      >
        <div class="table-com-td">第{{ index + 1 }}场</div>
        <div
          class="table-com-td"
          :style="{
            width: !columnItem.width ? '80px' : columnItem.width + 'px',
          }"
          v-for="(columnItem, columnIndex) in column"
          :key="columnIndex"
        >
          <span class="against" v-if="!columnItem.canChange">{{
            item[columnItem.prop]
          }}</span>
          <div
            @click="showList(item, columnItem.prop, index)"
            v-if="columnItem.canChange"
            style="background-color: rgba(62, 62, 98, 1);
    height: 0.6rem;line-height: 0.6rem;"
          >{{item[columnItem.prop].name}}
          </div>
        </div>
        <div class="table-com-td item-option" v-if="operatesCol.length">
          <div
            style="
              width: 100%;
              display: flex;
              padding: 0 0.5rem;
              justify-content: space-between;
            "
          >
            <div v-for="(opItem, opIndex) in operatesCol" :key="opIndex">
              <van-icon
                :name="opItem.icon"
                @click="opItem.methods(item, index)"
              />
            </div>
          </div>
        </div>
        <slot name="option"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableCom",
  props: {
    data: {
      type: Array,
      default: [],
    },
    column: {
      type: Array,
      default: [],
    },
    operatesCol: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    onInput(val, key) {
      console.log(val);
    },
    showList(item, key, index) {
      this.$emit("showListDialog", { item, key,index });
    },
  },
};
</script>

<style lang="less" scoped>
.against {
  padding:0.1rem 0.2rem;
  background: #3f3b9a;
}
.table-com {
  width: 100%;
  height: 100%;
  font-size: 0.32rem;
  color: rgba(255, 255, 255, 0.8);

  .table-com-common {
    display: flex;
    justify-content: space-between;
    height: 1rem;
    align-items: center;

    .table-com-td {
      text-align: center;
      width: 1.6rem;

      .list-keyboard {
        color: #000;
      }
    }

    .item-option {
      width: 2.4rem;
    }
  }

  .table-com-title {
    color: rgb(92, 91, 115);
    font-size: 0.28rem;

    .table-com-title-item {
      i {
        background-color: rgb(71, 68, 108);
        border-radius: 2px;
      }
    }
  }

  .table-com-list {
    height: calc(100% - 1rem);
    overflow-y: auto;

    .table-com-list-item {
      &:nth-child(2n) {
        background-color: rgb(50, 51, 77);
      }

      .van-field {
        background: #44455d;
        padding: 0;

        /deep/ .van-field__control {
          color: rgba(255, 255, 255, 0.8) !important;
        }
      }
    }
  }
}
</style>
